<template>
	<view>
		<view class="ranking-list-box">
			<view class="ranking-list" :class="'ranking-list'+num">
				<scroll-view scroll-y :style="'max-height:' + (height - 60) + 'px'" lower-threshold="300"
					@scrolltolower="reachBottom">
					<view class="ranking-th-box">
						<view class="ranking-th" style="flex: 1;">
							商品
						</view>
						<view class="ranking-th" style="width: 80rpx;">
							个数
						</view>
						<view class="ranking-th" style="width: 80rpx;">
							成本
						</view>
						<view class="ranking-th" style="width: 80rpx;">
							利润
						</view>
					</view>
					<view v-if="ranking.list.length > 0">
						<view class="ranking-item" v-for="(item,index) in ranking.list" :key="index"
							@click="rankingClick(item,index)">
							<view>

							</view>
							<view class="item-limit">
								<view v-if="index == 0 || index == 1 || index == 2">
									<u--image :showLoading="true"
										:src="staticFileUrl+'/image/stats/top'+(index + 1)+'.png'" width="48rpx"
										height="57rpx" radius="10rpx"></u--image>
								</view>
								<view v-else>
									{{index + 1}}
								</view>
							</view>
							<view class="item-left">
								<u--image :showLoading="true" :src="imgURL+ '/' +item.goodsFileName" width="80rpx"
									height="80rpx" radius="10rpx"></u--image>
							</view>
							<view class="item-right">
								<view class="item-info">
									<view class="item-name text-ellipsis">
										{{item.goodsName || "--"}}
									</view>
									<view class="item-m">
										条码: {{item.goodsBarCode || '--'}}
									</view>
								</view>
								<view class="item-count">
									{{item.totalQuantity || 0}}个
								</view>
								<view class="item-count">
									￥{{item.totalCostPrice || 0}}
								</view>
								<view class="item-count">
									￥{{item.totalProfit}}
								</view>
							</view>
						</view>
						<!-- <u-loadmore :status="status" /> -->
					</view>
					<view class="ranking-list-empty" v-else>
						<u-empty text="暂无排行数据" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
						<!-- 暂无排行数据 -->
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ranking-list-stats",
		props: {
			height: {
				type: Number,
				default: 0
			},
			startDateStr: {
				type: [Number, String],
				default: ''
			},
			endDateStr: {
				type: [Number, String],
				default: ''
			},
			dayType: {
				type: [Number, String],
				default: ''
			},
			secondaryType: {
				type: [Number, String],
				default: ''
			},
			firstType: {
				type: [Number, String],
				default: ''
			},
			num: {
				type: [Number, String],
				default: ''
			},
			merchantStoreIdArray: {
				type: Array,
				default () {
					return []
				}
			}
		},
		mounted() {},
		data() {
			return {
				ranking: {
					list: [],
					pageNum: 1,
					pageSize: 10,
					status: 'loadmore',
				},
				imgURL: this.$configPath.imgURL,
				staticFileUrl: this.$configPath.staticFileUrl,
			}
		},
		methods: {
			reload() {
				this.ranking.status = "loadmore";
				this.ranking.pageNum = 1;
				this.ranking.list = [];
				console.log("进来了", this.secondaryType);
				this.findStatsCommodityStockRecordList();
			},
			// 触底执行
			reachBottom() {
				if (this.ranking.status == "loading" || this.ranking.status == "nomore") {
					return;
				}
				this.ranking.status = "loading";
				this.ranking.pageNum += 1;
				this.findStatsCommodityStockRecordList();
			},
			findStatsCommodityStockRecordList() {
				this.ranking.status = "loading";
				let params = {
					startDateStr: this.startDateStr,
					endDateStr: this.endDateStr,
					pageNum: this.ranking.pageNum,
					pageSize: this.ranking.pageSize,
					merchantStoreIdArray: this.merchantStoreIdArray,
					dayType: this.dayType,
					secondaryType: this.secondaryType,
					firstType: this.firstType
				}
				this.$api('statsCommodityStockRecord.findStatsCommodityStockRecordList', params).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						if (res.data != null) {
							// 排行榜1
							this.ranking.list.push(...res.data.list);
							this.ranking.pageNum = res.data.pageNum;
							this.$nextTick(() => {
								this.$emit("countHeight");
							})
							if (this.ranking.pageNum >= res.data.pages) {
								this.ranking.status = 'nomore';
								return;
							}
							// 新写的需要在这里加这个
							this.ranking.status = 'loadmore';
						} else {
							this.ranking.pageNum = --this.ranking.pageNum;
							this.ranking.status = 'loadmore';
							this.$helpers.toast('请求数据失败:暂未查到数据');
						}
					} else {
						this.ranking.pageNum = --this.ranking.pageNum;
						this.ranking.status = 'loadmore';
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(res => {
					uni.hideLoading();
					this.ranking.pageNum = --this.ranking.pageNum;
					this.ranking.status = 'loadmore';
					console.log(res);
					this.$helpers.toast('服务器访问失败');
				})
			},
			rankingClick(item, index) {
				item.top = index + 1;
				this.$emit("rankingClick", item);
			}
		}
	}
</script>

<style lang="scss">
	.ranking-list-box {
		padding: 24rpx;

		.ranking-th-box {
			display: flex;
			align-items: center;
			background: rgb(239, 240, 242);
			z-index: 1;

			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 25rpx 22rpx;

			font-size: 26rpx;
			position: sticky;
			top: 0;

			.ranking-th {
				text-align: left;
				margin-left: 5rpx;
			}
		}

		// 排行榜1
		.ranking-list1 {
			// border: 1px solid rgb(96, 114, 255);

			border-radius: 20rpx;

			.ranking-item:nth-child(even) {
				// background-color: rgb(239, 238, 254);
				background-color: rgba(239, 238, 254, 0.4);
			}
		}

		// 排行榜2
		.ranking-list2 {
			// border: 1px solid rgb(255, 113, 121);

			border-radius: 20rpx;

			.ranking-item:nth-child(even) {
				background-color: rgba(255, 236, 237, 0.4);
				// background-color: rgb(255, 236, 237);
			}
		}

		// 排行榜3
		.ranking-list3 {
			// border: 1px solid rgb(254, 169, 56);

			border-radius: 20rpx;

			.ranking-item:nth-child(even) {
				background-color: rgba(250, 243, 234, 0.4);
				// background-color:  rgb(250, 243, 234);
			}
		}

		.ranking-list {
			overflow: hidden;
			border: 1rpx solid rgb(239, 240, 242);

			.ranking-item {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				padding-left: 0;

				.item-limit {
					// padding: 0 20rpx;

					width: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.item-left {
					font-size: 28px;
				}

				.item-right {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-info {
					    flex: 1;
					    color: rgb(34, 34, 34);
					    width: 250rpx;
					
					    .item-name {
					        font-size: 28rpx;
					        overflow: hidden;
					        -webkit-line-clamp: 2;
					        text-overflow: ellipsis;
					        display: -webkit-box;
					        -webkit-box-orient: vertical;
					        white-space: normal; /* 修改为 normal */
					    }
					
					    .item-m {
					        font-size: 24rpx;
					        margin-top: 4rpx;
					        white-space: nowrap;
					    }
					}


					.item-count {
						margin-left: 5rpx;
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						width: 80rpx;
						text-align: left;
						// 强制换行
						word-wrap: break-word;
						// 强制英文单词换行
						word-break: break-word;
					}
				}
			}

			.ranking-list-empty {
				text-align: center;
				padding: 20rpx;
				color: #9d9d9d;
				font-size: 24rpx;
			}

		}
	}
</style>